<template>
<!--  @ok="handleSubmit"-->

  <BasicModal
    v-bind="$attrs"
    @register="register"
    showFooter
    :title="getTitle"
    width="60%"
    @ok="handleSubmit"
    @cancel="closeFn"
  >
<!--    <BasicTable @register="registerTable">-->

<!--    </BasicTable>-->
    <div style="overflow: hidden; width: 100%; height: 625px;">
      <VxeBasicTable ref="tableRef" v-bind="gridOptions">
      </VxeBasicTable>
    </div>

  </BasicModal>
</template>
<script lang="ts" setup>
import {ref, computed, unref, reactive} from 'vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import {BasicTable, useTable, TableAction, FormSchema} from '@/components/Table';
  import { BasicTableProps, VxeBasicTable, VxeGridInstance,VxeGridListeners  } from '@/components/VxeTable';

import {searchFormSchema, vxeTableColumns, vxeTableFormSchema} from "../role.data";
  const props = defineProps({
    mode: { type: String,default:"multiple" },
    isAdd: {type:Boolean,default:false},
  });
import {materialTableListApi, supplierTableListApi} from "@/api/sys/msUser";

  import {useMessage} from "@/hooks/web/useMessage";

  const emit = defineEmits(['success', 'register']);
  const isUpdate = ref(true);
  const { createMessage } = useMessage();

  const columns= [
    { type: 'radio', width: 60
      , align: 'center'
    },
    {
      title: '供应商名称',
      field: 'name',
      showOverflow: 'title'
    },
    {
      title: '供应商编号',
      field: 'tid',
      showOverflow: 'title'
    },
    {
      title: '供应商类型',
      field: 'type',
      showOverflow: 'title'
    },
  ];

const tableRef = ref<VxeGridInstance>();

const gridOptions = reactive<BasicTableProps>({
  id: 'VxeTable',
  // keepSource: true,
  editConfig: { trigger: 'click', mode: 'cell', showStatus: true },
  showOverflow: true,
  size:"mini",
  height: 'auto',
  columns: columns,
  toolbarConfig: {

  },
  radioConfig: {
    highlight: true
  },
  formConfig: {

    enabled : true,
    items: vxeTableFormSchema
  },
  rowConfig: {
    labelField: 'tid',
    trigger: 'row'
  },
  proxyConfig: {
    props:{
      result:"data.list",
      list:"data.list",
      total:"data.totalResult",
      message:"message"
    },
    ajax: {
      query: async ({ page, form }) => {
        return supplierTableListApi({
          page: page.currentPage,
          pageSize: page.pageSize,
          ...form,
        });
      },

    },
  },
});

  const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
    //console.log("--data::",data)
    //打开弹层后的回调
    // clazzId.value=data.clazzId;
    // levelNames.value=data.levelNames;
    tableRef.value.commitProxy('reload')
  });


  const getTitle = ref("选择供应商");


  async function handleSubmit() {

    let selectRows = tableRef.value.getRadioRecord();


    if(!selectRows){
      createMessage.error("请先勾选供应商!");
      return false;
    }
    emit('success',selectRows);
    closeFn();
    // console.log("----selectIds",selectIds.value)
  }
  function closeFn(){
    // clearSelectedRowKeys();
    closeModal()
  }

</script>
